<template>
	<view class="about-container">
		<!-- 应用信息区域 -->
		<view class="app-info-section">
			<view class="logo-container">
				<view class="bird-logo">
					<!-- 小鸟图标 - 使用CSS绘制 -->
					<view class="bird">
						<view class="bird-head"></view>
						<view class="bird-body"></view>
						<view class="bird-wing-left"></view>
						<view class="bird-wing-right"></view>
						<view class="bird-tail"></view>
						<view class="bird-beak"></view>
					</view>
				</view>
			</view>
			<view class="app-name">lilishop</view>
			<view class="app-version">小程序版本: 4.2.13 release</view>
		</view>

		<!-- 信息链接区域 -->
		<view class="info-links-section">
			<view class="info-item" @click="goToLicense">
				<text class="item-text">证照信息</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
			<view class="info-item" @click="goToServiceAgreement">
				<text class="item-text">服务协议</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
			<view class="info-item" @click="goToPrivacyPolicy">
				<text class="item-text">隐私协议</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
			<view class="info-item" @click="goToAboutUs">
				<text class="item-text">关于我们</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 联系信息区域 -->
		<view class="contact-section">
			<view class="contact-item">
				<text class="contact-label">客服热线:</text>
				<text class="contact-value">13161366885</text>
			</view>
			<view class="contact-item">
				<text class="contact-label">客服邮箱:</text>
				<text class="contact-value">lili@lili.com</text>
			</view>
			<view class="contact-item">
				<text class="contact-link" @click="goToUserAgreement">《lilishop用户协议》</text>
			</view>
			<view class="copyright">
				<text class="copyright-text">CopyRight ©lilishop</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 跳转到证照信息
			goToLicense() {
				uni.navigateTo({
					url: "/pages/zhengzhaoxinxi/zhengzhaoxinxi"
				});
			},

			// 跳转到服务协议
			goToServiceAgreement() {
				uni.navigateTo({
					url: '/pages/fuwuxieyi/fuwuxieyi'
				});
			},

			// 跳转到隐私协议
			goToPrivacyPolicy() {
				uni.navigateTo({
					url:'/pages/login/yinsixieyi'
				});
			},

			// 跳转到关于我们
			goToAboutUs() {
				uni.showToast({
					title: '关于我们功能开发中',
					icon: 'none'
				});
			},

			// 跳转到用户协议
			goToUserAgreement() {
				uni.navigateTo({
					url: '/pages/fuwuxieyi/fuwuxieyi',
				});
			}
		}
	}
</script>

<style scoped>
	.about-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 20rpx;
	}

	/* 应用信息区域 */
	.app-info-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 60rpx 30rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.logo-container {
		margin-bottom: 30rpx;
	}

	.bird-logo {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 120rpx;
		height: 120rpx;
		margin: 0 auto;
	}

	/* 小鸟图标样式 */
	.bird {
		position: relative;
		width: 100rpx;
		height: 80rpx;
	}

	.bird-head {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 40rpx;
		background-color: #333;
		border-radius: 50%;
	}

	.bird-body {
		position: absolute;
		top: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 50rpx;
		background-color: #FFD700;
		border-radius: 25rpx;
	}

	.bird-wing-left {
		position: absolute;
		top: 25rpx;
		left: 15rpx;
		width: 25rpx;
		height: 20rpx;
		background-color: #90EE90;
		border-radius: 10rpx;
		transform: rotate(-15deg);
	}

	.bird-wing-right {
		position: absolute;
		top: 25rpx;
		right: 15rpx;
		width: 25rpx;
		height: 20rpx;
		background-color: #90EE90;
		border-radius: 10rpx;
		transform: rotate(15deg);
	}

	.bird-tail {
		position: absolute;
		bottom: 10rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 20rpx;
		height: 15rpx;
		background-color: #90EE90;
		border-radius: 10rpx;
	}

	.bird-beak {
		position: absolute;
		top: 15rpx;
		right: -5rpx;
		width: 0;
		height: 0;
		border-left: 8rpx solid #FFA500;
		border-top: 4rpx solid transparent;
		border-bottom: 4rpx solid transparent;
	}

	.app-name {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.app-version {
		font-size: 24rpx;
		color: #666;
	}

	/* 信息链接区域 */
	.info-links-section {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.info-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.item-text {
		font-size: 28rpx;
		color: #333;
	}

	/* 联系信息区域 */
	.contact-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	.contact-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.contact-item:last-child {
		margin-bottom: 0;
	}

	.contact-label {
		font-size: 26rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.contact-value {
		font-size: 26rpx;
		color: #333;
	}

	.contact-link {
		font-size: 26rpx;
		color: #007AFF;
		text-decoration: underline;
	}

	.copyright {
		margin-top: 30rpx;
		text-align: center;
	}

	.copyright-text {
		font-size: 24rpx;
		color: #999;
	}
</style> 